<template>
  <j-modal
    :title="title"
    :width="800"
    :visible="visible"
    :maskClosable="false"
    :ok-button-props="{ props: { disabled: disableSubmit } }"
    :fullscreen="true"
    @close="close"
    cancelText="关闭"
  >
    <div style="margin: 0 auto" :class="{ isCheck: isCheck }">
      <a-form-model ref="form" :rules="validatorRules" :model="queryParam">
        <table class="table table-striped table-bordered" align="center" valign="center">
          <tr>
            <td class="column title" colspan="12">基本信息</td>
          </tr>
          <tr>
            <td class="column">审计人员类别</td>
            <td class="value">
              <a-form-model-item label="" prop="category">
                <j-dict-select-tag
                  style="width: 100%"
                  v-model="queryParam.category"
                  dict-code="category_type"
                  :disabled="disableSubmit"
                  @change="handlerChange"
                />
              </a-form-model-item>
            </td>
            <!--          无-->
            <td class="column">审计人员属性</td>
            <td class="value">
              <a-form-model-item label="" prop="attributes">
                <j-dict-select-tag
                  style="width: 100%"
                  v-model="queryParam.attributes"
                  dict-code="audit_attribute"
                  :disabled="disableSubmit"
                />
              </a-form-model-item>
            </td>
            <td class="column">工作单位</td>
            <td class="value">
              <a-form-model-item label="" prop="unitname">
                <a-input
                  v-if="organShow && queryParam.category != '2'"
                  @click.native="openOrganModel"
                  v-model="queryParam.unitname"
                  :disabled="disableSubmit"
                  readOnly
                ></a-input>
                <a-select
                  style="width: 100%"
                  v-if="queryParam.category == '2'"
                  v-model="queryParam.unit"
                  placeholder="请选择"
                  @click.native="openCompany"
                  allow-clear
                  @change="handleChange"
                >
                  <a-select-option v-for="(item, index) in outsideCompany" :key="index" :value="item.id">
                    {{ item.name }}
                  </a-select-option>
                </a-select>
              </a-form-model-item>
            </td>
            <td class="column">
              姓名
              <a-select size="small" v-if="!disableSubmit" class="name-type" v-model="userType" disabled>
                <a-select-option :value="0"> 请选择</a-select-option>
                <a-select-option :value="1"> 内部选择</a-select-option>
                <a-select-option :value="2"> 无用户添加</a-select-option>
              </a-select>
            </td>
            <td class="value">
              <a-select
                show-search
                style="width: 100%"
                v-if="userType === 1 && selectFlag"
                v-model="queryParam.name"
                @change="selectPeople"
                :disabled="disableSubmit"
                :filter-option="(input, option) => option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0"
              >
                <template v-for="item in peopleList">
                  <a-select-option :key="item.id" :value="item.id">
                    {{ item.realname }}
                  </a-select-option>
                </template>
              </a-select>
              <a-input
                v-else
                v-model="queryParam.username"
                @change="userNameChange($event.target.value)"
                :disabled="disableSubmit"
              ></a-input>
            </td>
          </tr>
          <tr>
            <td class="column">审计人员状态</td>
            <td class="value">
              <a-form-model-item label="" prop="state">
                <j-dict-select-tag
                  style="width: 100%"
                  v-model="queryParam.state"
                  dict-code="person_status"
                  :disabled="disableSubmit"
                />
              </a-form-model-item>
            </td>
            <td class="column">性别</td>
            <td class="value">
              <a-form-model-item label="" prop="sex">
                <j-dict-select-tag
                  style="width: 100%"
                  v-model="queryParam.sex"
                  dict-code="sex1"
                  :disabled="disableSubmit"
                />
              </a-form-model-item>
            </td>
            <td class="column">出生日期</td>
            <td class="value">
              <j-date style="width: 100%" v-model="queryParam.birthday" :disabled="disableSubmit"></j-date>
            </td>
            <td class="column">政治面貌</td>
            <td class="value">
              <a-form-model-item label="" prop="politicalStatus">
                <j-dict-select-tag
                  style="width: 100%"
                  v-model="queryParam.politicalStatus"
                  dict-code="political_status"
                  :disabled="disableSubmit"
                />
              </a-form-model-item>
            </td>
          </tr>
          <tr>
            <td class="column">行政职务</td>
            <td class="value">
              <a-form-model-item label="" prop="jobStructure">
                <j-dict-select-tag
                  style="width: 100%"
                  v-model="queryParam.jobStructure"
                  dict-code="job_structure"
                  :disabled="disableSubmit"
                />
              </a-form-model-item>
            </td>
            <td class="column">技术职称</td>
            <td class="value">
              <a-form-model-item label="" prop="titleStructure">
                <j-dict-select-tag
                  style="width: 100%"
                  v-model="queryParam.titleStructure"
                  dict-code="title_structure"
                  :disabled="disableSubmit"
                />
              </a-form-model-item>
            </td>
            <td class="column">初始学历</td>
            <td class="value">
              <a-form-model-item label="" prop="fullTimeEducation">
                <j-dict-select-tag
                  style="width: 100%"
                  v-model="queryParam.fullTimeEducation"
                  dict-code="knowledge_structure"
                  :disabled="disableSubmit"
                />
              </a-form-model-item>
            </td>
            <td class="column">后续学历</td>
            <td class="value">
              <a-form-model-item label="" prop="followUpQualifications">
                <j-dict-select-tag
                  style="width: 100%"
                  v-model="queryParam.followUpQualifications"
                  dict-code="knowledge_structure"
                  :disabled="disableSubmit"
                />
              </a-form-model-item>
            </td>
          </tr>
          <tr>
            <td class="column">工作年限</td>
            <td class="value">
              <a-form-model-item label="" prop="workYear">
                <j-dict-select-tag
                  style="width: 100%"
                  v-model="queryParam.workYear"
                  dict-code="work_year"
                  :disabled="disableSubmit"
                />
              </a-form-model-item>
            </td>
            <td class="column">审计年限</td>
            <td class="value">
              <a-form-model-item label="" prop="auditPeriod">
                <j-dict-select-tag
                  style="width: 100%"
                  v-model="queryParam.auditPeriod"
                  dict-code="work_year"
                  :disabled="disableSubmit"
                />
              </a-form-model-item>
            </td>
            <td class="column">专业</td>
            <td class="value">
              <j-dict-select-tag
                style="width: 100%"
                v-model="queryParam.profession"
                dict-code="profess_type"
                :disabled="disableSubmit"
              />
            </td>
            <td class="column">专业特长</td>
            <td class="value">
              <a-input v-model="queryParam.specialties" :disabled="disableSubmit"></a-input>
            </td>
          </tr>
          <tr>
            <td class="column">在编</td>
            <td class="value">
              <j-dict-select-tag
                style="width: 100%"
                v-model="queryParam.compile"
                dict-code="yes_not"
                :disabled="disableSubmit"
              />
            </td>
            <td class="column">知识结构</td>
            <td class="value">
              <a-form-model-item label="" prop="knowledge">
                <j-dict-select-tag
                  style="width: 100%"
                  v-model="queryParam.knowledge"
                  dict-code="sj_resource_auditors_knowledge"
                  :disabled="disableSubmit"
                />
              </a-form-model-item>
            </td>
            <template v-if="userType !== 1">
              <td class="column">登录名</td>
              <td class="value">
                <a-form-model-item label="">
                  <a-input
                    v-model="queryParam.loginName"
                    :disabled="disableSubmit || (model.id ? true : false)"
                  ></a-input>
                </a-form-model-item>
              </td>
              <td class="column">密码</td>
              <td class="value">
                <a-form-model-item label="">
                  <a-input v-if="!model.id" v-model="queryParam.password"></a-input>
                  <a-input-password v-else :disabled="true" v-model="queryParam.password" />
                </a-form-model-item>
              </td>
            </template>
          </tr>
          <tr>
            <td class="column" colspan="1">附件</td>
            <td class="value" colspan="7" style="position: relative">
              <ZUpload
                :isShow="disableSubmit"
                ref="fileUpload"
                :fileid="queryParam.fileId"
                @uploadFile="uploadFile"
              ></ZUpload>
            </td>
          </tr>
          <tr>
            <td class="column title" colspan="12">职业资格证书</td>
          </tr>
          <tr>
            <td class="column">中国注册资格</td>
            <td class="value" colspan="3">
              <j-multi-select-tag
                style="width: 100%"
                v-model="queryParam.certificateType"
                dict-code="cert_type"
                :disabled="disableSubmit"
              />
            </td>
            <td class="column">国际注册资格</td>
            <td class="value" colspan="3">
              <a-input v-model="queryParam.certificateTypeUnion" :disabled="disableSubmit"></a-input>
            </td>
          </tr>
          <tr>
            <td class="column title" colspan="12">获得荣誉</td>
          </tr>
          <tr>
            <td class="column">集团公司及以上</td>
            <td class="value" colspan="3">
              <a-input v-model="queryParam.honor" :disabled="disableSubmit"></a-input>
            </td>
            <td class="column">其他</td>
            <td class="value" colspan="3">
              <a-input v-model="queryParam.honorOther" :disabled="disableSubmit"></a-input>
            </td>
          </tr>
          <tr>
            <td class="column title" colspan="12">编写制度</td>
          </tr>
          <tr>
            <td class="column">集团公司及以上</td>
            <td class="value" colspan="3">
              <a-input v-model="queryParam.compileSystem" :disabled="disableSubmit"></a-input>
            </td>
            <td class="column">其他</td>
            <td class="value" colspan="3">
              <a-input v-model="queryParam.compileSystemOther" :disabled="disableSubmit"></a-input>
            </td>
          </tr>
          <tr>
            <td class="column title" colspan="12">发表论文</td>
          </tr>
          <tr>
            <td class="column">省部级及以上刊物</td>
            <td class="value" colspan="3">
              <a-input v-model="queryParam.paper" :disabled="disableSubmit"></a-input>
            </td>
            <td class="column">其他</td>
            <td class="value" colspan="3">
              <a-input v-model="queryParam.paperOther" :disabled="disableSubmit"></a-input>
            </td>
          </tr>
          <tr>
            <td class="column title" colspan="12">联系方式</td>
          </tr>
          <tr>
            <td class="column">座机</td>
            <td class="value" colspan="3">
              <a-input v-model="queryParam.telephone" :disabled="disableSubmit"></a-input>
            </td>
            <td class="column">手机</td>
            <td class="value" colspan="3">
              <a-input v-model="queryParam.phone" :disabled="disableSubmit"></a-input>
            </td>
          </tr>
        </table>
      </a-form-model>
    </div>
    <!-- table区域-end -->
    <OrganModal ref="departModal" :model-select="{'title': queryParam.unitname,'id':queryParam.unit}" @ok="updateQueryParam"></OrganModal>
  </j-modal>
</template>
<script>
import { httpAction, getAction } from '@/api/manage'
import OrganModal from '../../components/OrganModal'
import ZUpload from '../../components/ZUpload'

export default {
  name: 'SysPositionModal',
  components: {
    OrganModal,
    ZUpload,
  },
  data() {
    return {
      disableSubmit: false,
      title: '机构信息',
      visible: false,
      isCheck: false,
      model: {},
      url: {
        get: '/sjzyzhgl/sjResourceAuditors/auditPersonListById',
        add: '/sjzyzhgl/sjResourceAuditors/add',
        edit: '/sjzyzhgl/sjResourceAuditors/edit',
        getPeople: '/sys/user/queryUserByDepId',
        company: '/sjzyzhgl/sjResourceExternalAuditInstitution/queryExternalAuditPersonSelect',
      },
      organShow: true,
      userType: 0,
      selectFlag: true,
      queryParam: {
        unitname: '',
      },
      isWacth: undefined,
      inOrOut: '',
      peopleList: [],
      tempUnitName: {},
      validatorRules: {
        category: [{ required: true, message: '请选择!' }],
        attributes: [{ required: true, message: '请选择!' }],
        unitname: [{ required: true, message: '请选择!' }],
        state: [{ required: true, message: '请选择!' }],
        sex: [{ required: true, message: '请选择!' }],
        politicalStatus: [{ required: true, message: '请选择!' }],
        jobStructure: [{ required: true, message: '请选择!' }],
        titleStructure: [{ required: true, message: '请选择!' }],
        fullTimeEducation: [{ required: true, message: '请选择!' }],
        followUpQualifications: [{ required: true, message: '请选择!' }],
        workYear: [{ required: true, message: '请选择!' }],
        auditPeriod: [{ required: true, message: '请选择!' }],
        knowledge: [{ required: true, message: '请选择!' }],
      },
      outsideCompany: [],
    }
  },
  created() {
    this.openCompany()
  },
  // beforeDestroy() {
  //   this.queryParam.category = '1'
  // },
  watch: {
    userType(val) {
      this.queryParam.username = ''
      this.queryParam.name = ''
      this.queryParam.loginName = ''
      this.queryParam.password = ''
      this.queryParam.userType = val
      console.log('debuger1')
    },
    'queryParam.unit': {
      handler: function () {
        this.getPeople()
      },
      immediate: true,
    },
  },
  methods: {
    getPeople() {
      if (this.queryParam.category != '2')
        getAction(this.url.getPeople, { id: this.queryParam.unit }).then((res) => {
          if (res.success) {
            this.peopleList = res.result
          } else {
            console.log(res)
          }
        })
    },
    handlerChange(val) {
      this.queryParam.unitname = ""
      this.queryParam.unit = ""
      // 姓名下拉随  审计人员类别 改变而改变
      this.userType = Number(val)
      // userType
    },
    userNameChange(val) {
      console.log(val)
      this.queryParam.name = val
    },
    selectPeople(data) {
      let row = this.peopleList.find((item) => item.id == data)
      this.queryParam.username = row.realname
      this.selectFlag = false
      this.$nextTick(() => {
        this.selectFlag = true
      })
    },
    add() {
      this.model = {}
      this.queryParam = {
        username: '',
        unitname: '',
        compile: 1,
        unit: '',
        userType: 1,
        loginName: '',
        password: '',
      }
      this.peopleList = []
      this.visible = true
      this.isWacth = false
    },
    check(record) {
      this.model = Object.assign({}, record)
      this.visible = true
      this.httpRequest()
    },
    edit(record) {
      this.model = Object.assign({}, record)
      this.visible = true
      this.httpRequest()
    },
    httpRequest() {
      getAction(this.url.get, { id: this.model.id }).then((res) => {
        if (res.success && res.result.length > 0) {
          console.log('debuger2')
          this.queryParam = Object.assign({}, this.queryParam, res.result[0])
          this.userType = this.queryParam.userType
        } else {
          console.log(res)
        }
      })
    },
    close(isSubmit) {
      if (isSubmit) {
        this.saveData()
      } else {
        this.visible = false
      }
    },
    uploadFile(id) {
      let url, type
      if (!this.model.id) {
        url = this.url.add
        type = 'post'
      } else {
        url = this.url.edit
        type = 'put'
      }
      this.queryParam.fileId = id
      httpAction(url, this.queryParam, type)
        .then((res) => {
          if (res.success) {
            this.$message.success(res.message)
            this.$emit('ok')
            this.visible = false
          } else {
            this.$message.error(res.message)
          }
        })
        .finally(() => {})
    },
    saveData() {
      console.log(this.queryParam)
      this.$refs.form.validate((valid) => {
        if (valid) {
          this.$refs.fileUpload.saveFile('sjry')
        } else {
          return false
        }
      })
    },
    openOrganModel() {
      this.$refs.departModal.show()
      // this.$refs.departModal.selectedKeys = [this.queryParam.unit]
    },
    updateQueryParam(data) {
      this.queryParam.unitname = data.departName
      this.queryParam.unit = data.id
      this.getPeople()
      this.organShow = false
      this.$nextTick(() => {
        this.organShow = true
      })
      this.$refs.form.validateField('unitname', (error) => {
        console.log(error)
      })
    },
    openCompany() {
      getAction(this.url.company).then((res) => {
        if (res.success) {
          this.outsideCompany = res.result
          console.log('this.tenantsOptions: ', res)
        }
      })
    },
    handleChange(value) {
      let data = this.outsideCompany.find((item) => value == item.id)
      this.queryParam.unitname = data.name
    },
  },
}
</script>

<style lang="less" scoped>
@import '../../css/checkAndEdit.less';

.name-type {
  width: 110px;
  margin-left: 5px;
  border: 1px solid #e0e0e0;

  /deep/ .ant-select-selection {
    box-sizing: border-box;
    min-height: 27px !important;

    .ant-select-selection__rendered {
      line-height: 27px !important;
    }
  }
}
</style>
